<template>
	<view class="container">

		<view class="subtitle">
			示例 head（头像）
		</view>
		<view class="btn" @click="showFW('head')">show头像</view>
		<view class="btn" @click="updateFW('head')">update</view>
		<view class="btn" @click="hideFW('head')">hide头像</view>

		<view class="subtitle">
			示例 head（头像）web image
		</view>
		<view class="btn" @click="showFW('headwebimage')">show头像headwebimage</view>
		<view class="btn" @click="updateFW('headwebimage')">update</view>
		<view class="btn" @click="hideFW('headwebimage')">hide头像headwebimage</view>

		<view class="subtitle">
			示例1（菜单）
		</view>
		<view class="btn" @click="showFW('menu')">show</view>
		<view class="btn" @click="updateFW('menu')">update</view>
		<view class="btn" @click="hideFW('menu')">hide</view>

		<view class="subtitle">
			示例2（通知）
		</view>
		<view class="btn" @click="showFW('notify')">show</view>
		<view class="btn" @click="updateFW('notify')">update</view>
		<view class="btn" @click="hideFW('notify')">hide</view>

		<view class="subtitle">
			示例3（图标按钮）
		</view>
		<view class="btn" @click="showFW('button')">show</view>
		<view class="btn" @click="updateFW('button')">update</view>
		<view class="btn" @click="hideFW('button')">hide</view>

		<view class="subtitle">
			示例4（巡逻信息）
		</view>
		<view class="btn" @click="showFW('patrol')">show</view>
		<view class="btn" @click="updateFW('patrol')">update</view>
		<view class="btn" @click="hideFW('patrol')">hide</view>
		<view class="subtitle">
			权限单独申请
		</view>
		<view class="btn" @click="permissionFW()">申请悬浮窗权限</view>
		<view class="btn" @click="isPermissionFW()">是否已经申请权限</view>
		<view class="btn" @click="goPermissionFW()">跳转到申请悬浮窗权限界面</view>
	</view>
</template>

<script>
	const floatWin = uni.requireNativePlugin('Ba-FloatWinWeb')
	export default {
		data() {
			return {
				url_head: "file:///android_asset/testFloatHead.html",
				url_head_web_image: "file:///android_asset/testFloatHeadWebImage.html",
				url1: "file:///android_asset/testFloatWin.html",
				url2: "file:///android_asset/testFloatWin2.html",
				url3: "file:///android_asset/testFloatWin3.html",
				url4: "file:///android_asset/testFloatWin4.html",
			}
		},
		methods: {
			showFW(tag) { //显示
				let params = {
					isToast: true,
					tag: tag
					//isToast: true,
					//tag: tag,//悬浮窗标识，用于区分多个悬浮窗，可以不传
					//webUrl: "file:///android_asset/testFloatWin.html",//网页地址
					//width:128,//宽度 px
					//height: 128,//高度 px
					//xRatio: 0.8,//x轴偏移量（屏幕宽度比例）
					//yRatio: 0.7,//y轴偏移量（屏幕高度比例）
					//moveType: 1,//拖动方式：1：不可拖动 2：任意拖动、3：贴边拖动。默认2
					//isRememberXY: false,//是否记住上次的位置。默认true
					//isPermission: false,//是否申请悬浮窗权限。默认true
					//widthRatio:1,//宽度（屏幕宽度比例），width有值时无效
					//heightRatio: 0.3,//高度（屏幕高度比例），height有值时无效
					//webviewBgColor:"#FFFFFF"//webview背景色，默认透明
					//isStartApp:true//点击悬浮窗，是否打开App，默认true
					//fullscreen:true//是否全屏，沉浸到状态栏，默认false（注意heightRatio和widthRatio设置为1）
				}

				switch (tag) {
					case "head":
						params.webUrl = this.url_head
						params.width = 150;
						params.height = 150;
						params.xRatio = 0.8;
						params.yRatio = 0.2;
						break;
					case "headwebimage":
						params.webUrl = this.url_head_web_image
						params.width = 150;
						params.height = 150;
						params.xRatio = 0.8;
						params.yRatio = 0.2;
						break;
					case "menu":
						params.webUrl = this.url1
						params.width = 128;
						params.height = 128;
						params.xRatio = 0.8;
						params.yRatio = 0.7;
						break;
					case "notify":
						params.webUrl = this.url2 + "?title=微信&content=您收到1条消息&time=10分钟之前"
						params.height = 60;
						params.moveType = 1;
						break;
					case "button":
						params.webUrl = this.url3
						params.width = 40;
						params.height = 40;
						params.xRatio = 0.8;
						params.yRatio = 0.2;
						break;
					case "patrol":
						params.webUrl = this.url4
						params.width = 100;
						params.height = 100;
						params.xRatio = 0.8;
						params.yRatio = 0.5;
						break;
					default:
						break;
				}
				floatWin.show(params,
					(res) => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			updateFW(tag) { //更新数据
				let webUrl = "";
				switch (tag) {
					case "head":
						webUrl = this.url_head + "?num1=66&num2=21"
						break;
					case "headwebimage":
						webUrl = this.url_head_web_image + "?num1=66&num2=21"
						break;
					case "menu":
						webUrl = this.url1 + "?num1=66&num2=21"
						break;
					case "notify":
						webUrl = this.url2 + "?title=微信&content=您收到3条消息&time=刚刚"
						break;
					case "patrol":
						webUrl = this.url4 + "?time=03:36&msg=656米"
						break;
					default:
						break;
				}
				floatWin.update({
						webUrl: webUrl,
						tag: tag
						//tag: tag,
						//width:128,//宽度 px
						//height: 128,//高度 px
						//xRatio: 0.8,//x轴偏移量（屏幕宽度比例）
						//yRatio: 0.7,//y轴偏移量（屏幕高度比例）
						//moveType: 1,//拖动方式：1：不可拖动 2：任意拖动、3：贴边拖动。默认2


					},
					(res) => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			hideFW(tag) { //隐藏
				floatWin.hide({
						tag: tag
					},
					(res) => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			permissionFW() { //申请悬浮窗权限
				floatWin.permission(
					(res) => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			goPermissionFW() { //跳转到悬浮窗权限页面
				floatWin.goPermission(
					(res) => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			isPermissionFW() { //是否申请悬浮窗权限
				floatWin.isPermission(
					(res) => {
						console.log(res);
						let msg = res.msg;
						if (res.data) {
							msg = "isPermission:" + res.data.isPermission;
						}
						uni.showToast({
							title: msg,
							icon: "none",
							duration: 3000
						})
					});
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		display: flex;
		flex-direction: column;

		.btn {
			margin: 20rpx;
			padding: 10rpx;
			text-align: center;
			background-color: royalblue;
			color: white;
			border-radius: 16rpx;
		}

		.dataResult {
			display: flex;
			flex-direction: column;
			padding: 20rpx;
			color: #555;
			word-wrap: break-word;
		}
	}

	.form-row {
		padding-top: 16rpx;
		padding-bottom: 16rpx;
		padding-left: 16rpx;
		padding-right: 16rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.form-key {
			display: inline-block;
			text-align: justify;
			text-justify: distribute-all-lines;
			text-align-last: justify;
			color: #2f2f2f;
			font-size: 28rpx;
			font-weight: 600;
		}

		.form-value {
			padding-left: 16rpx;

			.radio {
				padding: 0rpx 16rpx;
			}
		}
	}
</style>
